<template>
  <div class="box">
    <ul class="footContain">
      <li>
        <router-link class="router" to="/DaHome" active-class="active">
          <span class="iconfont icon-weibiaoti-"></span>
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link class="router" to="/Classify" active-class="active">
          <span class="iconfont icon-041siyecao"></span>
          <span>分类</span>
        </router-link>
      </li>
      <li>
        <router-link class="router" to="/Fond" active-class="active">
          <span class="iconfont icon-zhongcao"></span>
          <span>种草</span>
        </router-link>
      </li>
      <li>
        <router-link class="router" to="/LifeHome" active-class="active">
          <span class="iconfont icon-ball-camera"></span>
          <span>智能家居</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
//chuang
export default {
  name: "Footer",
};
</script>

<style scoped>
.box {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
}
.footContain {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.6rem;
}
.footContain li .router {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(128, 123, 123);
  font-size: 14px;
  font-weight: 200;
}
.iconfont {
  font-size: 0.28rem;
}
.active {
  color: orange !important;
}
</style>